<template>
	<view class="article page">
		<view class="filter">
			<view @click="filter(item.id)" :class="{sel:item.id==idx}" class="item" v-for="(item,index) in filters" :key="index">
				{{item.name}}
			</view>
		</view>
	
		<view class="items">
			<scroll-view style="height: 100%;"  class="scroll" scroll-y="true">
				<article-item class="item"></article-item>
				<article-item class="item"></article-item>
				<article-item class="item"></article-item>
				<article-item class="item"></article-item>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import articleItem from '@/components/article-item/article-item.vue'
	export default {
		components:{
				articleItem
		},
		data() {
			return {
				filters:[
					{name:'往期',id:0},
					{name:'精选',id:1},
					{name:'推荐',id:2}
				],
				idx:null
			};
		},
		methods:{
			filter(id){
				this.idx = id
			}
		}
	}
</script>

<style lang="stylus">
		.article
			display flex
			flex-direction column
			.filter
				display flex
				padding  0 52upx
				display flex
				justify-content space-between
				align-items center
				height 210upx
				.item
					display flex
					align-items center
					justify-content center
					width:182upx;
					height:70upx;
					background:rgba(255,255,255,1);
					box-shadow:0upx 16upx 18upx 3upx rgba(0, 0, 0, 0.05);
					border-radius:10upx;
					color #A1A1A1
					font-size 28upx
					&.sel
						background-color #F9A528
						color #FFFFFF
			.items
				flex 1
				overflow hidden
				.item
					display block
					margin-bottom 37upx
				
				
</style>
